<template>
    <div class="bigBox">
        <div class="headerBox">
            <div class="left">
                <p>
                    SHARE:&nbsp;&nbsp;
                </p>
                <span>
                    <svg t="1725435151995" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5156" width="24" height="24">
                        <path
                            d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                            fill="#28C445" p-id="5157"></path>
                        <path
                            d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                            fill="#28C445" p-id="5158"></path>
                    </svg>
                    <svg t="1725435183944" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6251" width="24" height="24">
                        <path
                            d="M512 0C229.243259 0 0 229.224296 0 512s229.243259 512 512 512 512-229.224296 512-512S794.756741 0 512 0zM460.8 778.24c-175.312593 0-317.44-91.685926-317.44-204.781037 0-113.095111 212.859259-291.688296 294.286222-291.688296 34.133333 0 101.148444 25.448296 54.272 106.078815-3.280593 5.632 105.718519-46.895407 165.300148-12.344889 59.600593 34.550519 0 90.055111 0 96.218074 0 6.162963 119.656296 6.162963 119.656296 101.717333C776.874667 686.554074 636.112593 778.24 460.8 778.24zM710.276741 359.461926c-19.740444-23.438222-55.030519-17.957926-55.030519-17.957926-10.334815 0.094815-18.375111-7.111111-19.797333-16.839111-0.132741 0.986074-0.568889 1.896296-0.568889 2.901333l0-5.707852c0 1.005037 0.436148 1.85837 0.568889 2.806519 1.422222-9.993481 9.53837-18.792296 19.740444-20.138667 0 0 42.723556-11.681185 79.739259 21.636741 37.015704 33.317926 21.864296 88.405333 21.864296 88.405333-1.592889 11.207111-12.553481 20.15763-23.931259 20.15763L730.832593 434.725926c-11.396741 0-18.033778-8.779852-14.904889-19.607704C715.927704 415.099259 729.998222 382.900148 710.276741 359.461926zM850.62163 430.26963c-1.422222 15.587556-15.018667 28.273778-30.511407 30.01837 1.137778 0.132741 2.23763 0.341333 3.432296 0.341333l-6.97837 0c1.194667 0 2.37037-0.208593 3.546074-0.341333-15.018667-1.744593-25.125926-14.449778-22.945185-30.056296 0 0 16.70637-64.606815-23.988148-123.031704-40.713481-58.424889-128.208593-48.336593-128.208593-48.336593-15.54963-0.018963-28.596148-11.45363-30.245926-26.718815-0.113778 1.080889-0.32237 2.123852-0.32237 3.223704l0-6.409481c0 1.099852 0.208593 2.123852 0.32237 3.185778 1.649778-15.265185 14.506667-27.439407 30.340741-27.553185 0 0 91.098074-9.197037 158.947556 54.954667C871.860148 323.678815 850.62163 430.26963 850.62163 430.26963z"
                            fill="#F56467" p-id="6252"></path>
                        <path d="M450.56 573.44m-20.48 0a1.08 1.08 0 1 0 40.96 0 1.08 1.08 0 1 0-40.96 0Z"
                            fill="#F56467" p-id="6253"></path>
                        <path
                            d="M403.303951 640.642444a1.62 2.159 0 1 0-25.964544-55.683072 1.62 2.159 0 1 0 25.964544 55.683072Z"
                            fill="#F56467" p-id="6254"></path>
                        <path
                            d="M432.033185 451.830519c-111.995259 15.739259-194.484148 87.514074-184.263111 160.331852 10.221037 72.817778 109.321481 119.087407 221.335704 103.329185 112.014222-15.739259 194.503111-87.514074 184.282074-160.331852C643.147852 482.360889 544.047407 436.091259 432.033185 451.830519zM448.398222 695.675259c-66.635852 12.951704-129.384296-21.560889-140.174222-77.065481-10.789926-55.523556 34.474667-111.009185 101.091556-123.960889 66.635852-12.970667 129.384296 21.541926 140.174222 77.065481C560.260741 627.218963 515.015111 682.723556 448.398222 695.675259z"
                            fill="#F56467" p-id="6255"></path>
                    </svg>
                    <svg t="1725435219536" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="7276" width="24" height="24">
                        <path
                            d="M967.601349 1024c31.076808 0 56.398651-25.321843 56.398651-56.398651V56.398651c0-31.076808-25.321843-56.398651-56.398651-56.398651H56.398651C25.321843 0 0 25.321843 0 56.398651v910.819034c0 31.076808 25.321843 56.398651 56.398651 56.398651h911.202698z"
                            fill="#3C5A99" p-id="7277"></path>
                        <path
                            d="M706.709629 1024V627.29112h133.13151l19.950543-154.61671h-153.082053V374.072686c0-44.888722 12.277257-75.198202 76.732859-75.198201h81.720494v-138.119146c-14.195579-1.918321-62.920944-6.138629-119.319595-6.138629-118.168602 0-198.738104 72.128887-198.738104 204.109405v113.948295h-133.515174v154.61671h133.515174v396.70888h159.604346z"
                            fill="#FFFFFF" p-id="7278"></path>
                    </svg>
                    <svg t="1725435433340" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8320" width="24" height="24">
                        <path
                            d="M512 1024C229.2224 1024 0 794.7776 0 512S229.2224 0 512 0s512 229.2224 512 512-229.2224 512-512 512z m268.8768-623.2832v-17.664c24.8576-17.6384 46.1568-42.3424 63.9232-67.0464-21.2992 10.5984-46.1568 17.664-71.04 21.1712 24.8832-14.1056 46.1824-42.3424 56.832-70.5792-24.8576 14.1056-49.7152 24.704-78.1312 31.744-21.2992-24.704-56.832-42.3424-92.3392-42.3424-71.0144 0-124.288 56.4736-124.288 130.6112 0 10.5728 0 21.1712 3.5328 31.744-102.9888-7.04-195.328-59.9808-259.2512-141.184-17.7408 14.1312-24.832 35.328-24.832 60.0064 0 45.9008 21.2736 88.2432 56.8064 112.9728-21.3248 0-39.0656-7.0656-56.832-17.664 0 63.5392 42.624 120.0128 99.456 130.6112-10.6752 3.5328-21.3248 3.5328-32 3.5328-7.0912 0-14.1824 0-24.832-3.5328 14.208 52.9408 63.9232 91.776 117.1968 91.776a241.8176 241.8176 0 0 1-156.2624 56.4736c-10.6496 0-21.3248 0-28.416-3.5328 56.832 38.8352 120.7552 60.0064 191.7696 60.0064 230.8608 7.0656 358.7072-194.1504 358.7072-367.104z"
                            fill="#3298F0" p-id="8321"></path>
                    </svg>
                </span>
            </div>

            <div class="right">
                <el-input :prefix-icon="Search" placeholder="please enter keyword"></el-input>
            </div>
        </div>
        <div class="chooseBox">
            <div class="logoText">
                <img @click="$router.push('/')" src="../../../assets/image/logo.jpg" alt="">
            </div>
            <div class="a">
                <router-link to="/home">HOME</router-link>
                <router-link to="/women">WOMEN</router-link>
                <router-link to="/inTown">IN TOWN</router-link>
                <router-link to="/men">MEN</router-link>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
</script>

<style lang="scss" scoped>
@media (min-width: 1280px) and (max-width: 1920px) {
    
}
@media (min-width: 750px) and (max-width: 1280px) {
    .a{
        font-size: 14px !important;
    }

    svg{
        margin-right: 10px !important;
    }
}
@media (max-width: 750px) {
    .a{
        font-size: 12px !important;
    }

    svg{
        margin-right: 5px !important;
    }
}
.bigBox {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

.headerBox {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;

    .left {
        display: flex;
        align-items: center;

        p {
            color: gray;
            font-size: 14px;
        }

        span {
            display: flex;

            svg {
                margin-right: 15px;
            }
        }
    }

    .right {}

}

.chooseBox {
    width: 100%;
    max-width: 1280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .logoText {

        img{
            width: 300px;
            height: 200px;
            object-fit: contain;
        }
    }

    .a {

        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        padding-top: 16px;
        padding-bottom: 16px;

        .router-link-active {
            color: black;
        }

        a {
            color: #666;
            margin-right: 32px;
            text-decoration: none;
            font-weight: bold;
        }
    }
}
</style>